Using RegExp (Regular Expressions) to search for street names can be tricky because street names vary widely in format, but you can create patterns to match common structures.
match full street address (basic)
code:
<script>
const pattern = /\d+\s+\w+\s+(?:Street|St|Avenue|Ave|Road|Rd|Boulevard|Blvd|Lane|Ln|Drive|Dr)/i;
const text = "123 Main Street";
console.log(pattern.test(text)); // true
</script>
Where:
\d+→ house number
\s+→ one or more spaces
\w+street name (assumes single word)
(?:...) → non-capturing group for street types
i flagcase-insensitive
capture just the street name
code:
<div>
<p id="name"></p>
</div>
<style>
#name{margin-left: 2vw; }
</style>
<script>
const text1 = "456 Oak Avenue";
const match = text1.match(/\d+\s+([A-Za-z\s.]+?)\s+(?:Street|St|Ave|Avenue|Rd|Road|Blvd|Boulevard|Ln|Lane|Dr|Drive)/i);
if (match) {
console.log(match[1].trim()); // "Oak"
document.getElementById("name").innerText = `Extracted street name from "${text1}": ${match[1].trim()}`;
}
</script>
more complex street name capture
code:
<div>
<p id="name1"></p>
</div>
<style>
#name1{margin-left: 2vw; }
</style>
<script>
// More robust pattern
const pattern_A = /\d+\s+([A-Za-z0-9\s.'-]+?)\s+(?:Street|St\.?|Avenue|Ave\.?|Road|Rd\.?|Boulevard|
Blvd\.?|Lane|Ln\.?|Drive|Dr\.?|Way|Court|Ct\.?|Circle|Cir\.?)/i;
const examples = [
"123 Martin Luther King Jr. Blvd",
"456 O'Malley Road",
"789 West 42nd St.",
"1001 De la Cruz Ave"
];
examples.forEach(addr => {
const match = addr.match(pattern_A);
if (match) {
console.log(`Street name: "${match[1].trim()}"`);
document.getElementById("name1").innerText += `street name from "${addr}": ${match[1].trim()}\n`;
}
});
</script>
select pictures based on street names
To select pictures in a gallery based on street names, you typically need to associate each image with metadata (like a street name), then filter or query those images using that metadata. Here’s how you can do it in practice using HTML, JavaScript, and data attributes (or other metadata sources):
store street names with each image
Use HTML data-* attributes, JavaScript objects, or a data source (e.g., JSON) to link each image to its street name.
